<template>
  <div class="full-page-4">
    <el-image :src="png1" fit="cover" class="absolute"  :class="{'enter':active,'leave':!active}"></el-image>
    <el-image :src="png2" fit="cover" class="absolute" :class="{'enter':active,'leave':!active}"></el-image>
    <div class="" :class="{'enter':active,'leave':!active}">
      <div class="bg-black bg-opacity-20 rounded-2xl h-1/2 w-8/12 absolute right-0 px-4 py-6 lg:w-5/12" >
        <h2  class="w-full text-center mb-1.5 text-base text-white font-bold" >Skills</h2>
        <div class="flex justify-around">
          <div class="relative my-2">
            <span class="font-sans absolute text-yellow-400  text-xs left-5 bottom-7">Java-ssm</span>
            <el-progress type="circle" :width="90" :stroke-width="10" :percentage="percentage[0]" color="#ffa83b"></el-progress>
          </div>
          <div class="relative my-2">
            <span class="font-sans absolute text-orange-400  text-xs left-6 bottom-7">Es6-Vue</span>
            <el-progress  type="circle" :width="90" :stroke-width="10" :percentage="percentage[1]" color="#93b4ff"></el-progress>
          </div>
        </div>
        <el-progress class="my-2 lg:my-4" :text-inside="true" :stroke-width="26" :percentage="percentage[2]" color="#1aff98">
          database {{percentage[2]}}%
        </el-progress>
        <el-progress class="my-2 lg:my-4" :text-inside="true" :stroke-width="26" :percentage="percentage[3]" color="#79dfff">
          middle software {{percentage[3]}}%
        </el-progress>
        <el-progress class="my-2 lg:my-4" :text-inside="true" :stroke-width="26" :percentage="percentage[4]" :color="'#0f84ff'">
          docker linux {{percentage[4]}}%
        </el-progress>
        <el-progress class="my-2 lg:my-4" :text-inside="true" :stroke-width="26" :percentage="percentage[5]" :color="'#e260f8'">
          Other Language {{percentage[5]}}%
        </el-progress>
      </div>
    </div>
    <div class="absolute bottom-0 lg:bg-black lg:bg-opacity-20 lg:h-1/2 lg:w-1/3 lg:rounded-bl-2xl">
      <pie-chart :active="active" class="h-80 w-96 lg:h-96 lg:w-11/12"/>
    </div>
    <p :class="{'enter':active, 'leave':!active}">{{ t('page4.content.c1') }}</p>
    <p :class="{'enter':active, 'leave':!active}">{{ t('page4.content.c2') }}</p>
    <p :class="{'enter':active, 'leave':!active}">{{ t('page4.content.c3') }}</p>
    <el-image class="bg-image" :class="{'enter': active }" :src="bg" fit="cover"></el-image>
  </div>
</template>
<script setup name="fullPage4">
const { t } = useI18n();
const bg = useAssets('images/p4.jpg');
const png1 = useAssets('images/png/light2.png');
const png2 = useAssets('images/png/rain2.png');
const props = defineProps({
  index: {
    type: Number,
    default: 0
  }
});

const percentage = ref([0, 0, 0, 0, 0, 0, 0]);

const active = computed(() => props.index === 3);

let timer;

watch(active, () => {
  if (active.value) {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      percentage.value = [90, 80, 78, 70, 65, 58, 42];
    }, 1000);
  } else {
    percentage.value = [0, 0, 0, 0, 0, 0, 0];
  }
});

</script>

<style lang="scss" scoped>
:deep(.el-progress__text) {
  color: white;
}
.el-image {
  &:nth-of-type(1){
    @apply opacity-0 top-20 left-10 lg:left-36;
    &.enter{
      animation: shining 2s  1s infinite alternate ease-in;
    }
  }
  &:nth-of-type(2){
    @apply -top-2/4 w-1/2;
    &.enter{
      animation: rain1  3s  forwards;
    }
    &.leave{
      animation: rain2  2s  forwards;
    }
  }
}

p {
  @apply text-white text-2xl font-bold absolute right-10 hidden lg:block;
  @for $i from 1 through 3 {
      &:nth-of-type(#{$i}){
        bottom: $i*2+ em;
        &.enter{ animation: slideInRight 2s,fadeIn 2s; }
        &.leave{ animation: slideOutRight 1s,fadeOut 1s; }
      }
  }
}

@keyframes rain1{
  from{
    top:-50%;
    left: 50%;
  }to{
     top:20%;
     left:20%;}
}

@keyframes rain2{
  from{
    top: 20%;
    left: 20%;
    opacity: 1;
  }to{
     opacity: 0;
     top:100%;
     left:-20%;}
}

@keyframes big {
  from{
    transform: scale(1);
  }
  to{
    transform: scale(1.06);
  }
}

@keyframes shining {
  from{
    opacity: 0;
    transform:translate(-50%,-50%) scale(0);
  }to{
     opacity: 0.6;
     transform:translate(-50%,-50%) scale(0.36);
   }
}
</style>
